<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <el-input v-model="filters.supplierName" placeholder="供应商名称"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="filters.supplierCode" placeholder="供应商编码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="findList">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="addCompany">新增</el-button>
        </el-form-item>
        <el-form-item>
          <form :action="baseUrl+'/supplier/downloadCustMode'" method="get">
            <el-button type="primary" native-type="submit">下载模板</el-button>
          </form>
        </el-form-item>
        <el-form-item>
          <el-upload
            class="upload-demo"
            :action="baseUrl+'/bdInvbasdoc/uploadCust'"
            :show-file-list="false"
            :auto-upload="false"
            :on-change="uploadFile"
          >
            <el-button type="primary">点击上传</el-button>
            <!-- <div slot="tip" class="el-upload__tip">上传供应商excel,请根据模板格式进行填写,只能上传excel文件</div> -->
          </el-upload>
        </el-form-item>
        <el-form-item>
          <div class="text">上传供应商excel,请根据模板格式进行填写,只能上传excel文件</div>
        </el-form-item>
      </el-form>
    </el-col>
    <!--列表-->
    <el-table
      :data="list"
      highlight-current-row
      v-loading="listLoading"
      style="width: 100%;"
      height="70vh"
    >
      <el-table-column prop="supplierCode" label="供应商编码" width="120" align="center"></el-table-column>
      <el-table-column prop="supplierName" label="供应商名称" align="center"></el-table-column>
      <el-table-column prop="contractPrice" label="合同价" align="center"></el-table-column>
      <el-table-column prop="taxRate" label="税率" align="center"></el-table-column>
      <el-table-column prop="taxInclusivePrice" label="含税价" align="center"></el-table-column>
      <el-table-column prop="expirationDate" label="生效日期" align="center"></el-table-column>
      <el-table-column prop="effectiveDate" label="失效日期" align="center"></el-table-column>
      <el-table-column prop="remark" label="备注" align="center"></el-table-column>
      <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="handEdit(scope.row)">编辑</el-button>
          <el-button size="small" @click="handDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pageSize"
        :total="total"
        style="float:right;"
      ></el-pagination>
    </el-col>
    <!--新增 编辑界面-->
    <el-dialog title="供应商" :visible.sync="addFormVisible" :close-on-click-modal="false" top="3vh">
      <Supplier @hideTotas="hideTotas" v-if="addFormVisible" :sendFormData="sendFormData" ref="supperForm"></Supplier>
    </el-dialog>
  </section>
</template>
<script>
import API from "../../api/webpackApi";
import Supplier from "./components/Supplier";
import { uploadExcel, supplierList, supplierDel } from "../../api/baseSetting";
export default {
  components: {
    Supplier
  },
  data() {
    return {
      baseUrl: API.url,
      filters: {
        supplierName: "",
        supplierCode: ""
      },
      addFormVisible: false,
      list: [],
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sendFormData: {
        //点中的参数
      }
    };
  },
  methods: {
    //上传文件
    uploadFile(e) {
      console.log(e);
      var type = e.name.substr(e.name.lastIndexOf("."));
      if (".xls" == type || ".xlsx" == type) {
        var file = new FormData();
        file.append("file", e.raw);
        uploadExcel(file).then(res => {
          this.$message({
            message: "上传文件成功",
            type: "success"
          });
          this.getList();
        });
      } else {
        this.$message({
          message: "请上传excel文件",
          type: "warning"
        });
      }
    },
    //点击删除
    handDelete(e) {
      let id = e.id;
      this.$confirm("确认删除该供应商", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          supplierDel([id]).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.filters.supplierName = "";
            this.filters.supplierCode = "";
            this.page = 1;
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "fail",
            message: "删除失败!"
          });
          // this.page = 1;
          // this.filters.supplierName = "";
          // this.getList();
        });
    },
    //点击编辑
    handEdit(detail) {
      this.sendFormData = detail;
      this.addFormVisible = true;
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //隐藏新增表单
    hideTotas() {
      this.addFormVisible = false;
      this.filters.supplierName = "";
      this.filters.supplierCode = "";
      this.page = 1;
      this.getList();
    },
    //点击新增
    addCompany() {
      this.sendFormData = {};
      this.addFormVisible = true;
    },
    //点击查询
    findList() {
      this.page = 1;
      this.getList();
    },
    //获取公司列表
    getList() {
      let para = Object.assign({}, this.filters);
      let page = {
        page: this.page,
        pageSize: this.pageSize
      };
      para.page = page;
      this.listLoading = true;
      supplierList(para)
        .then(res => {
          this.listLoading = false;
          this.list = res.records;
          this.total = res.total;
        })
        .catch(err => {
          this.listLoading = false;
        });
    }
  },
  mounted() {
    this.getList();
  }
};
</script>
<style lang="less" scoped>
.text {
  font-size: 14px;
  color: #999;
}
</style>